<template>
  <div class="app-container">
    <el-container>
      <el-main>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form :model="queryParams" :rules="rules">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="员工编号：" prop="userId">
                    <el-input
                      v-if="isEdit && tab === 0"
                      v-model="queryParams.editForm.userId"
                      disabled
                      style="width: 240px"
                      readonly
                    />
                    <span v-else>{{ queryParams.userId }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="司机名称：" prop="name">
                    <el-input
                      v-if="isEdit && tab === 0"
                      v-model="queryParams.editForm.name"
                      disabled
                      style="width: 240px"
                    />
                    <span v-else>{{ queryParams.name }}</span>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="所属机构：" prop="agency">
                    <el-input
                      v-if="isEdit && tab === 0"
                      v-model="queryParams.editForm.agency.name"
                      disabled
                      style="width: 240px"
                    />
                    <span v-else>{{ queryParams.agency?.name }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="电话：" prop="mobile">
                    <el-input
                      v-if="isEdit && tab === 0"
                      v-model="queryParams.editForm.mobile"
                      disabled
                      style="width: 240px"
                    />
                    <span v-else>{{ queryParams.mobile }}</span>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="年龄：" prop="age">
                    <el-input
                      v-if="isEdit && tab === 0"
                      v-model="queryParams.editForm.age"
                      style="width: 240px"
                    />
                    <span v-else>{{ queryParams.age }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <!-- 行驶证信息 -->
          <el-tab-pane label="驾驶证信息" name="second">
            <el-form :model="driverLicense">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="行驶证号：" prop="licenseNumber">
                    <el-input
                      v-if="isEdit && tab === 1"
                      v-model="driverLicense.editForm.licenseNumber"
                      placeholder="请输入驾驶证号"
                      style="width: 214px"
                    />
                    <span v-else>{{
                      driverLicense.licenseNumber || "--"
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="准驾车型：" prop="allowableType">
                    <el-input
                      v-if="isEdit && tab === 1"
                      v-model="driverLicense.editForm.allowableType"
                      placeholder="请输入准驾车型"
                      style="width: 214px"
                    />
                    <span v-else>{{
                      driverLicense.allowableType || "--"
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="初次领证日期："
                    prop="initialCertificateDate"
                  >
                    <el-input
                      v-if="isEdit && tab === 1"
                      v-model="driverLicense.editForm.initialCertificateDate"
                      placeholder="请选择注册时间"
                      style="width: 214px"
                    />
                    <span v-else>{{
                      driverLicense.initialCertificateDate || "--"
                    }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="驾驶证有效期限：" prop="validPeriod">
                    <el-input
                      v-if="isEdit && tab === 1"
                      v-model="driverLicense.editForm.validPeriod"
                      placeholder="请输入驾驶证有效期限"
                      style="width: 214px"
                    >
                      <span slot="suffix">年</span>
                    </el-input>
                    <span v-else>{{ driverLicense.validPeriod }} 年</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾龄：" prop="driverAge">
                    <el-input
                      v-if="isEdit && tab === 1"
                      v-model="driverLicense.editForm.driverAge"
                      placeholder="请输入驾龄"
                      style="width: 214px"
                    ><span slot="suffix">年</span>
                    </el-input>
                    <span v-else>{{ driverLicense.driverAge }} 年</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾驶证类型：" prop="licenseType">
                    <el-input
                      v-if="isEdit && tab === 1"
                      v-model="driverLicense.editForm.licenseType"
                      placeholder="请输入驾驶证类型"
                      style="width: 214px"
                    />
                    <span v-else>{{ driverLicense.licenseType || "--" }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item
                    label="从业资格证："
                    prop="qualificationCertificate"
                  >
                    <el-input
                      v-if="isEdit && tab === 1"
                      v-model="driverLicense.editForm.qualificationCertificate"
                      placeholder="请输入从业资格证"
                      style="width: 214px"
                    />
                    <span v-else>{{
                      driverLicense.qualificationCertificate || "--"
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="入场证信息：" prop="passCertificate">
                    <el-input
                      v-if="isEdit && tab === 1"
                      v-model="driverLicense.editForm.passCertificate"
                      placeholder="请输入入场证信息"
                      style="width: 214px"
                    />
                    <span v-else>{{ driverLicense.passCertificate }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <div class="photoBox">
                  图片信息
                  <template v-if="isEdit && tab === 1">
                    <template v-if="!driverLicense?.picture?.length">
                      <!-- 没有图片信息 -->
                      <img
                        src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/f5b1a839-88ab-4af4-aba4-8b23320098a8.png"
                        alt=""
                        class="photo"
                      >
                      <img
                        src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/50dcaf77-01ae-424c-b4b2-2f5efb96791a.png"
                        alt=""
                        class="photo"
                      >
                    </template>
                    <template v-else>
                      <!-- 拥有图片信息 -->
                      <div
                        v-for="(src, index) in driverLicense.picture"
                        :key="index"
                        class="photo"
                      >
                        <transition name="el-zoom-in-top">
                          <img width="100%" height="100%" :src="src" alt="">
                        </transition>
                        <div class="handleBox">
                          <span>
                            <i
                              class="el-icon-zoom-in"
                              @click="showDialog(src)"
                            />
                            <i
                              class="el-icon-delete"
                              @click="deletePhoto(src)"
                            />
                          </span>
                        </div>
                      </div>
                    </template>
                    <el-upload
                      action=""
                      :http-request="uploadImage"
                      :show-file-list="false"
                      class="photo"
                      :before-upload="beforeAvatarUpload"
                    >
                      <i class="el-icon-upload2" />
                      <div class="el-upload__text">上传图片</div>
                    </el-upload>
                  </template>
                  <template v-else>
                    <template
                      v-if="!driverLicense?.picture?.length"
                    ><img
                      src=""
                      alt=""
                      class="photo"
                    ></template>
                    <template v-else>
                      <div
                        v-for="(src, index) in driverLicense.picture"
                        :key="index"
                        class="photo"
                      >
                        <img width="100%" height="100%" :src="src" alt="">
                        <div class="handleBox">
                          <i class="el-icon-zoom-in" @click="showDialog(src)" />
                        </div>
                      </div>
                    </template>
                  </template>
                </div>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer style="text-align: center; border-top: 1px solid #e5e7ec">
        <!-- 编辑状态 -->
        <div v-if="isEdit" style="text-algin: center">
          <el-button type="primary" @click="fnSave">保存</el-button>
          <el-button @click="isEdit = false">取消</el-button>
        </div>
        <!-- 非编辑状态 -->
        <div v-else style="text-algin: center">
          <el-button type="primary" @click="fnEdit(titleInfo)">编辑</el-button>
        </div>
      </el-footer>
    </el-container>
    <el-dialog class="photoDetail" :visible.sync="dialogVisible">
      <img :src="magnifyPhoto" alt="">
      <i class="el-icon-close" @click="dialogVisible = false" />
    </el-dialog>
  </div>
</template>

<script>
import {
  editDriverAPI,
  editDriverLicenseAPI,
  getDriverDEtailsAPI,
  getDriverLicenseAPI,
  imageUploadAPI
} from '@/api/employee'
export default {
  name: 'DriverDetails',
  data() {
    return {
      infoForm: {},
      activeName: 'first',
      dialogVisible: false,
      dialogImageUrl: '',
      isEdit: false,
      srcList: [],
      // 司机详情
      queryParams: {},
      // 驾驶证信息数据
      driverLicense: {},
      magnifyPhoto: '', // 放大图片
      rules: {},
      value1: '',
      titleInfo: 'queryParams',
      tab: 0
    }
  },
  created() {
    this.getDriverDEtails()
  },
  methods: {
    // 删除图片
    deletePhoto(src) {
      this.driverLicense.picture.splice(
        this.driverLicense.picture.indexOf(src),
        1
      )
    },
    // 显示放大效果
    showDialog(src) {
      this.magnifyPhoto = src
      this.dialogVisible = true
    },
    // 上传之前的回调函数 , 做文件校验
    beforeAvatarUpload(file) {
      // 文件类型校验
      const fileTypeArr = ['image/jpeg', 'image/png', 'image/gif']
      const isJPG = fileTypeArr.includes(file.type)
      // 文件大小限制
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    async uploadImage(e) {
      // 首先判断是否图片已经上传了两张了
      if (this.driverLicense.picture.length >= 2) {
        return this.$message.error('最多上传2张图片')
      }
      const data = new FormData()
      data.append('file', e.file)
      const res = await imageUploadAPI(data)
      this.driverLicense.picture.push(res)
    },
    async getDriverDEtails() {
      const res = await getDriverDEtailsAPI(this.$route.query.id)
      this.queryParams = res
    },
    // 切换tab栏
    handleClick(tab, event) {
      this.isEdit = false
      this.tab = 0
      if (tab.index === '1') {
        this.getDriverLicense()
        this.tab = 1
        this.titleInfo = 'driverLicense'
      }
    },
    // 编辑
    fnEdit(val) {
      this.$set(this[val], 'editForm', {})
      for (const key in this[val]) {
        if (key !== 'editForm') {
          this.$set(this[val].editForm, key, this[val][key])
        }
      }
      this.isEdit = true
    },
    // 保存
    async fnSave() {
      if (this.titleInfo === 'queryParams') {
        for (const key in this.queryParams.editForm) {
          if (key !== 'editForm') {
            this.queryParams[key] = this.queryParams.editForm[key]
          }
        }
        // delete this.queryParams.editForm
        await editDriverAPI(this.queryParams)
        this.$message.success('修改成功')
        this.isEdit = false
      } else {
        if (this.driverLicense.picture.length < 2) {
          return this.$message.error('驾驶证照片必须上传两张')
        }
        for (const key in this.driverLicense.editForm) {
          if (key !== 'editForm') {
            this.driverLicense[key] = this.driverLicense.editForm[key]
          }
        }
        // delete this.queryParams.editForm
        this.driverLicense.editForm.picture =
          this.driverLicense.picture.join(',')
        await editDriverLicenseAPI(this.driverLicense.editForm)
        this.$message.success('修改成功')
        this.isEdit = false
      }
    },
    // 获取行驶证信息
    async getDriverLicense() {
      const res = await getDriverLicenseAPI(this.$route.query.id)
      this.driverLicense = res
      this.driverLicense.picture = res.picture?.split(',')
      this.driverLicense.picture = this.driverLicense.picture || []
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  :deep(.el-form) {
    padding: 20px 40px;
    .el-input--suffix {
      .el-input__suffix {
        color: #000;
        padding-right: 1em;
      }
    }
    .photoBox {
      font-size: 14px;
      color: #606266;
      font-weight: 600;
      display: flex;
      .photo {
        margin-left: 20px;
        position: relative;
        width: 212px;
        height: 159px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 400;
        color: #363535;
        .el-upload {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-content: space-around;
          flex-wrap: wrap;
          justify-content: center;
        }
        .handleBox {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          text-align: center;
          line-height: 159px;
          background-color: rgba($color: #000000, $alpha: 0.5);
          color: #fff;
          opacity: 0;
          cursor: pointer;
          i {
            &:nth-child(2) {
              margin-left: 35px;
            }
            font-size: 28px;
          }
        }
        &:hover .handleBox {
          opacity: 1;
        }
        .el-upload:hover {
          color: #e35f42;
        }
        i {
          font-size: 20px;
        }
      }
      .photo:nth-child(1) {
        margin-left: 60px;
      }
      div.photo {
        border: 1px dashed #d8dde3;
      }
    }
  }
  // height: calc(100vh - 50px);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  :deep(.el-container) {
    flex-grow: 1;
    background-color: #fff;
    .el-footer {
      height: 87px !important;
      .el-button {
        margin-top: 31px;
        padding: 10px 40px;
      }
    }
  }
  .footer {
    position: relative;
  }
  :deep(.el-tabs) {
    .el-tabs__nav {
      transform: translateX(30px) !important;
    }
    .el-tabs__item.is-active {
      font-size: 16px;
      font-weight: 600;
      color: #000;
    }
  }
  :deep(.el-dialog) {
    width: 600px;
    height: 600px;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
      position: relative;
    }
    img {
      width: 100%;
      height: 100%;
    }
    .el-icon-close {
      position: absolute;
      top: 5%;
      right: 5%;
      color: #909292;
      cursor: pointer;
      &:hover {
        color: #4f9cff;
      }
    }
  }
}
</style>
